<template>
  <div class="home-view">
    <HeroCarousel />

    <div class="main-content">
      <CategoryQuickNav />
      <FeaturedPromotions />
      <ProductSection 
        title="热门兑换" 
        :products="hotProducts" 
        type="hot"
        v-loading="loading" 
      />
      <ProductSection 
        title="新品上线" 
        :products="newProducts" 
        type="new"
        v-loading="loading" 
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import HeroCarousel from '@/components/business/home/HeroCarousel.vue'
import CategoryQuickNav from '@/components/business/home/CategoryQuickNav.vue'
import FeaturedPromotions from '@/components/business/home/FeaturedPromotions.vue'
import ProductSection from '@/components/business/home/ProductSection.vue'
import { getHotProducts, getProductList } from '@/api/modules/product'
import type { Product } from '@/types'

const hotProducts = ref<Product[]>([])
const newProducts = ref<Product[]>([])
const loading = ref(false)

const loadData = async () => {
  try {
    loading.value = true
    // Fetch hot products
    const hot = await getHotProducts()
    hotProducts.value = hot

    // Fetch new products (using general list for now)
    const newArrivals = await getProductList({ page: 1, size: 8 })
    newProducts.value = newArrivals.list

  } catch (error) {
    console.error('Failed to load homepage data:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.home-view {
  background-color: #f4f4f5;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>